---
id: pills
title: Pills
---

import Playground from '@theme/Playground';

## Standard

<Playground>
  <ul class="pills">
    <li class="pills__item pills__item--active">Alpha</li>
    <li class="pills__item">Beta</li>
    <li class="pills__item">Gamma</li>
    <li class="pills__item">Zeta</li>
  </ul>
</Playground>

## Block

<Playground>
  <ul class="pills pills--block">
    <li class="pills__item pills__item--active">Alpha</li>
    <li class="pills__item">Beta</li>
    <li class="pills__item">Gamma</li>
    <li class="pills__item">Zeta</li>
  </ul>
</Playground>
